<template>
    <div>
        <subcate :data='catelist' :cid='course.cid'  @cid='getcid'/>
        <van-field v-model="course.name" label="名称" />
       <van-field v-model="course.description" label="描述" />
       <van-field v-model="course.tname" label="讲师" />
       <van-image :src="'http://localhost:5000/static/upload/'+course.pic" width='100' height=100 />
       <van-button @click="picshow=true">删除</van-button>
       <van-button @click="fileshow=true">更换图片</van-button>
           <van-popup v-model="picshow" class='filebg'>
           <h1> 确定要删除吗？</h1>
           <van-button @click='delpic(course.pic)'>确定</van-button>
           </van-popup>
            
            <van-popup v-model="fileshow" class='filebg'>
           <van-uploader :after-read='changepic'/>
            </van-popup>

        <div v-if="videos && videos.length>0">
            <div v-for="i in videos">
                       <video :src='"http://localhost:5000/static/upload/"+i' controls="controls"  width=300 height=200></video>
                        <van-button @click='delvideo(i)'>删除</van-button>
                    <van-button @click='updatevideo(i)'>更换视频</van-button>
            </div>

        </div>


       <br>
       <van-button @click="update">修改</van-button>
    </div>
</template>

<script>
import subcate from '@/components/try/subcate'
    export default {
        components:{
            'subcate':subcate
        },
        data(){
            return{
                id:this.$route.query.id,
                course:{},
                catelist:[],
                videos:'',
                picshow:false,
                fileshow:false,
                type:1, //默认为操作的是图片
                videoname:''
            }
        },
        methods:{
          get_catelist(){
                this.$axios.get('upload').then(res=>{
                    this.catelist = res.data.list
                })
            },
          getcourse(){
              this.$axios.get('courss?id='+this.id).then(res=>{
                  this.course = res.data.course
                  this.videos = JSON.parse(res.data.course['vedios'])
              })
          },
          getcid(id){
            this.course.cid=id
        },
        // 删除图片
        delpic(name){
            if(this.type==2){
                name = this.videoname
            }
            this.$axios.delete('delFile?name='+name+'&id='+this.course.id+'&type='+this.type).then(res=>{
                // 回来操作，如果是图片把pic设置为空
                this.picshow=false
                if(this.type==1){
                    this.course.pic=''
                }else{
                    this.getcourse()
                }
            })
        },
        // 更换图片
         changepic(file){
            //先判断类型为图片还是视频
            if(this.type ==1){
                //判断看以前的有没有图片，如果有先删除再上传
                if(this.course.pic != ''){
                    this.delpic(this.course.pic)
                }
            }else{
                //视频
                this.delpic(this.videoname)
            }
            
            let data = new FormData()
            data.append('file',file.file)
            data.append('id',this.course.id)
            data.append('type',this.type)
            data.append('videoname',this.videoname)
            this.$axios.post('upload',data).then(res=>{
                  //框消失
                this.fileshow=false
                if(this.type == 1){
                     //更新course.pic
                    this.course.pic = res.data.pic
                }else{
                    this.getcourse()
                }
            })
        },
        // 删除视频
        delvideo(name){
            // 更新操作类型为视频
            this.type=2
            this.picshow = true
            this.videoname = name
        },
        // 更换视频
        updatevideo(){
            this.type=2
            this.fileshow = true
            this.videoname = name

        },
        update(){
            this.$axios.post('courseM',this.course).then(res=>{
                
            })
        }
    },
    mounted(){
        this.get_catelist()
        this.getcourse()
    }
    }
</script>

<style scoped>

</style>